<template>
  <div class="cesium-navigation-container">
    <div class="operate-item " title="放大" @click="handleZoomOut">
      <i class="iconfont icon-fangda1"></i>
    </div>
    <div class="operate-item" @click="handleReset" title="复原">
      <i class="iconfont icon-gengxin"></i>
    </div>
    <div class="operate-item " title="缩小" @clic k="handleZoomIn">
      <i class="iconfont icon-suoxiao1"></i>
    </div>
    <div class="operate-item" @click="handleSwitch">
      <i class="iconfont icon-a-2Dditu_xuanzhong" v-if="switchType == 3" title="二维切换"></i>
      <i class="iconfont icon-sanwei" v-if="switchType == 2" title="三维切换"></i>
    </div>
  </div>
</template>
<script>
import CesiumNavigation from "cesium-navigation-es6";
let navigation = null,
  viewer = null;
export default {
  name: "index",
  data() {
    return {
      name: 'test',
      switchType: 3,
      topVal: '30px'
    };
  },
  methods:{
    clean() {
      navigation.destroy();
      navigation = null;
    },
    handleZoomOut() {
      let viewer = window.earth.viewer;
      let position = viewer.camera.position;
      let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;

      let moveRate = cameraHeight / 20.0;

      viewer.camera.moveForward(moveRate);
    },
    handleZoomIn() {
      let viewer = window.earth.viewer;
      let position = viewer.camera.position;
      let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;

      let moveRate = cameraHeight / 20.0;

      viewer.camera.moveBackward(moveRate);
      this.$emit('emitZoomOutIn');
    },
    handleReset() {
      this.$emit('emitResetMap');
    },
    handleSwitch() {
      let switchType = this.switchType === 2 ? 3 : 2;
      this.switchType = switchType;
      this.$emit('emitSwitchiMap', switchType);
    }
  },
  mounted() {
    viewer = window.earth.viewer;
    const options = {};
    // eslint-disable-next-line no-undef
    options.defaultResetView = new Cesium.Cartographic.fromDegrees(115, 30, 2000000);
    //相机延时
    options.duration = 3; //默认为3s

    // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
    options.enableCompass = true;
    // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
    options.enableZoomControls = false;
    // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
    options.enableDistanceLegend = false;
    // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
    options.enableCompassOuterRing = true;

    //修改重置视图的tooltip
    options.resetTooltip = '重置视图';
    //修改放大按钮的tooltip
    options.zoomInTooltip = '放大';
    //修改缩小按钮的tooltip
    options.zoomOutTooltip = '缩小';
    //如需自定义罗盘控件，请看下面的自定义罗盘控件
    navigation = new CesiumNavigation(viewer, options);
  }
};
</script>
<style lang="scss">
.cesium-navigation-container {
  position: absolute;
  right: 30px;
  top: 190px;
  z-index: 99;
  width: 30px;
  text-align: center;
  .operate-item {
    width: 27px;
    height: 27px;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
    border: 1px solid #555;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
  }
}

.map-container {
  #navigationDiv {
    position: absolute;
    right: 0px;
    bottom: 380px;
    .navigation-controls {
      .navigation-control {
        background-color: rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #555555;
      }
      .navigation-control-last {
        border-bottom: 1px solid #555555;
        background-color: rgba(0, 0, 0, 0.1);
      }
      .navigation-control:nth-child(2) {
        display: none;
      }
    }
  }
}
.compass{
  top: 80px;
}

</style>
